<template>
    <div>
        <div class="outmain ba_f">
            <div class="shuju_title mar_b10">
                <div class="shuju_title_text">
                    <span>语音提醒</span>
                </div>
            </div>
          <div class="ba_f8 pad_20">
            <div class="lh25 msgtext fon_12">
              温馨提示：请按照我们指定的打印机型号进行相关配置，同品牌其他型号不保证可以正常打印；<br>
              1、易联云系列支持K4、K5、K6等型号打印机，建议购买gprs版本更加稳定，易联云开发平台<a href="https://dev.yilianyun.net/" target="_blank">https://dev.yilianyun.net/</a>；<br>
              2、飞鹅打印机均支持58mm尺寸系列，建议购买FP-58W型号，飞鹅开发平台<a href="https://admin.feieyun.com/login.php" target="_blank">https://admin.feieyun.com/login.php</a>。<br>
              3、标签打印机仅支持FP-N20W型号，其他型号不保证可以正常打印，飞鹅开发平台<a href="https://admin.feieyun.com/login.php" target="_blank">https://admin.feieyun.com/login.php</a>。
            </div>
          </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="提示音设置" name="1"></el-tab-pane>
            </el-tabs>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">新订单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.newOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="4">循环提示</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('newsUrl')">
                        <audio ref="newsUrl" :src="newsUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">自动接单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.receiving">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('autoOrderUrl')">
                        <audio ref="autoOrderUrl" :src="autoOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">预订单提醒</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.advanceOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('advanceOrderUrl')">
                        <audio ref="advanceOrderUrl" :src="advanceOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">取消单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.cancelOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('cancelOrderUrl')">
                        <audio ref="cancelOrderUrl" :src="cancelOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">退单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.chargebackOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('retreatOrderUrl')">
                        <audio ref="retreatOrderUrl" :src="retreatOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">催单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.reminderOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('urgeOrderUrl')">
                        <audio ref="urgeOrderUrl" :src="urgeOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">异常单</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.errorOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('abnormalOrderUrl')">
                        <audio ref="abnormalOrderUrl" :src="abnormalOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">打印机断开</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.printerDisconnect">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('printerDisconnect')">
                        <audio ref="printerDisconnect" :src="printerDisconnect"></audio>
                        试听
                    </el-button>
                </div>
            </div>
            <div class="flex bor_b_dd pad_tb_20">
                <div class="bflex-2">出餐慢</div>
                <div class="bflex-4">
                    <el-radio-group v-model="form.slowOrder">
                        <el-radio label="1">提示1次</el-radio>
                        <el-radio label="3">提示3次</el-radio>
                        <el-radio label="0">不提示</el-radio>
                    </el-radio-group>
                </div>
                <div class="bflex-2">
                    <el-select v-model="model8" clearable placeholder="请选择" disabled>
                        <el-option
                                v-for="item in cityList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="bflex-1">
                    <i class="el-icon-bell fon_14"/>
                    <el-button type="text" class="mar_l10" @click="autoPLay('slowOrderUrl')">
                        <audio ref="slowOrderUrl" :src="slowOrderUrl"></audio>
                        试听
                    </el-button>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getStoreConfig, postStoreConfig} from "@/api/setup";

    export default {
        created() {
            this.bus.$emit('loading', true);
            this.init();
        },
        data() {
            return {
                activeName: '1',
                newsUrl: require('@/assets/audio/newsUrl.mp3'),
                autoOrderUrl: require('@/assets/audio/autoOrderUrl.mp3'),
                advanceOrderUrl: require('@/assets/audio/advanceOrderUrl.mp3'),
                cancelOrderUrl: require('@/assets/audio/cancelOrderUrl.mp3'),
                retreatOrderUrl: require('@/assets/audio/retreatOrderUrl.mp3'),
                urgeOrderUrl: require('@/assets/audio/urgeOrderUrl.mp3'),
                abnormalOrderUrl: require('@/assets/audio/abnormalOrderUrl.mp3'),
                printerDisconnect: require('@/assets/audio/printerDisconnect.mp3'),
                slowOrderUrl: require('@/assets/audio/slowOrderUrl.mp3'),
                gender: '1',
                form: {
                    newOrder: '1',
                    receiving: '1',
                    receivedOrder: '1',
                    advanceOrder: '1',
                    cancelOrder: '1',
                    chargebackOrder: '1',
                    reminderOrder: '1',
                    errorOrder: '1',
                    printerDisconnect: '1',
                    slowOrder: '1',
                },
                cityList: [
                    {
                        value: '1',
                        label: '经典女生版'
                    },
                    {
                        value: '2',
                        label: '纯音乐'
                    },
                ],
                model8: '1'
            }
        },
        methods: {
            async init() {
                const {data} = await getStoreConfig({ident: 'takeawayVoice'});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            handleClick() {
            },
            autoPLay(type) {
                switch (type) {
                    case 'newsUrl':
                        this.$refs.newsUrl.play()
                        break;
                    case 'autoOrderUrl':
                        this.$refs.autoOrderUrl.play()
                        break;
                    case 'advanceOrderUrl':
                        this.$refs.advanceOrderUrl.play()
                        break;
                    case 'cancelOrderUrl':
                        this.$refs.cancelOrderUrl.play()
                        break;
                    case 'retreatOrderUrl':
                        this.$refs.retreatOrderUrl.play()
                        break;
                    case 'urgeOrderUrl':
                        this.$refs.urgeOrderUrl.play()
                        break;
                    case 'abnormalOrderUrl':
                        this.$refs.abnormalOrderUrl.play()
                        break;
                    case 'printerDisconnect':
                        this.$refs.printerDisconnect.play()
                        break;
                    case 'slowOrderUrl':
                        this.$refs.slowOrderUrl.play()
                        break;
                }
            },
            async submitForm() {
                this.form.ident = 'takeawayVoice'
                this.form.identName = '外卖语音订单'
                const {msg} = await postStoreConfig(this.form);
                this.$baseMessage(msg, "success");
                this.init();
            }
        }
    }
</script>
<style lang="scss" scoped>
    .el-radio {
        margin-right: 80px;
    }
</style>
